<template>
  <el-dialog v-model="dialogVisible" title="选项" width="80%" :before-close="handleClose">
    <div>
      <el-button type="primary" @click="add" style="margin-bottom: 10px">添加</el-button>
      <div style="display: flex;flex-wrap: wrap">
        <div style="width: 320px;padding: 20px;border: 1px solid #cccccc;border-radius: 4px;margin: 0 10px 10px 0" v-for="(item,index) in list" :key="item.id">
          <div style="display: flex;align-items: center;margin-bottom: 4px">
            <span style="display: inline-block;width: 160px;text-align: right;margin-right: 4px">字段名称:</span>
            <el-input v-model="list[index].name" style="width: 400px" placeholder="字段名称" />
          </div>
          <div style="display: flex;align-items: center;margin-bottom: 4px">
            <span style="display: inline-block;width: 160px;text-align: right;margin-right: 4px">字段英文名称:</span>
            <el-input v-model="list[index].nameEn" style="width: 400px" placeholder="字段名称" />
          </div>
          <div style="display: flex;align-items: center">
            <span style="display: inline-block;width: 160px;text-align: right;margin-right: 4px">字段值:</span>
            <el-input v-model="list[index].value" style="width: 400px" placeholder="字段值" />
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="save">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,reactive,onMounted } from "vue";
import {_addBox, _getOptionList, _getOptionListByName, _updateBox} from "../../http/api.js";
import {ElLoading, ElMessage} from "element-plus";

const $emit = defineEmits(['showEditOptionEmit']);
const props = defineProps({
  fieldType:String,
  fieldId:String
})

const list = ref([]); // 选项列表

const dialogVisible = ref(true);
// 关闭弹框
const handleClose = () => {
  $emit('showEditOptionEmit')
}
// 获取选项列表
const getOptionListByName = (type) => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  _getOptionListByName(type)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let item = res.data.data[0];
          list.value = item.list || [];
          console.log(item);
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage({message: '网络异常', type: 'error' });
      })
}
onMounted(() => {
  getOptionListByName(props.fieldType);
})
// 添加
const add = () => {
  list.value.push({ name:'',value:'',nameEn:''})
}
// 保存
const save = () => {
  console.log(list.value);
  addInfo()
}
// 添加子项
const addInfo = () => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  console.log(list.value);
  let lists = [];
  list.value.forEach(v => {
    if(v.name) {
      lists.push(v)
    }
  })
  let params = {
    id:props.fieldId,
    list:lists
  }
  console.log(params);
  _addBox(params)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          ElMessage({message: '添加成功', type: 'success' });
          handleClose()
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage({message: '网络异常', type: 'error' });
      })
}
// 更新数据
const updateBox = () => {
  _updateBox()
}
</script>

<style scoped lang="scss">

</style>